不錯，很多網(wǎng)頁(yè)設計都需要選擇適當的顏色，讓頁(yè)面有最酷的外觀(guān)，不過(guò)在真正的網(wǎng)頁(yè)設計中，可能更多的時(shí)間都花在這樣一些問(wèn)題上：文本放在哪里，文本的外觀(guān)是怎樣的。由于存在這些問(wèn)題，出現了一些HTML標記（如<FONT>和<CENTER>）允許你對文本的外觀(guān)和放置有所控制。

因為文本如此重要，所以有很多CSS屬性以這樣或那樣的方式影響文本。文本和字體之間有什么不同呢？簡(jiǎn)單地講，文本是內容，而字體用于顯示這個(gè)內容。使用文本屬性，可以控制文本相對于該行余下內容的位置、使其作為上標、加下劃線(xiàn)，以及改變大小寫(xiě)等。甚至還可以有限地模擬打字機的Tab鍵的使用。

下面先來(lái)討論如何影響文本在行中的水平定位。寫(xiě)一個(gè)時(shí)事通訊或做一份報告時(shí)，你可能會(huì )采取一些步可以把這些基本動(dòng)作看作是這些步驟的一部分。

縮進(jìn)文本

將Web頁(yè)面上一個(gè)段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果（去除段落之間的空行是第二常用的方法，這個(gè)內容將在第7章討論）。有些網(wǎng)站在段落的第一個(gè)字母前放一個(gè)很小的透明圖像，這些圖像將文本推到后面來(lái)制造一種縮進(jìn)文本的感覺(jué).另外一些網(wǎng)站則使用完全非標準的SPACER標記。在CSS網(wǎng)站制作中，有一種更好的方法實(shí)現文本縮進(jìn)，即 text-indent 屬性。

計算值：

對于百分數值，要根據指定確定，對于長(cháng)度值，則為絕對長(cháng)度

通過(guò)使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定長(cháng)度，甚至該長(cháng)度可以是負值。當然，這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)：

p {text-indent: 3em;}

這個(gè)規則會(huì )使所有段落的首行縮進(jìn)3em。

一般地，可以為所有塊級元素應用text-indent,但無(wú)法將這個(gè)屬性應用到行內元素，圖像之類(lèi)的替換元素上也無(wú)法應用text-indent屬性。不過(guò)，如果一個(gè)塊級元素（如段落）的首行中有一個(gè)圖像，它會(huì )隨著(zhù)該行的其余文本移動(dòng)。

注意：如果想把一個(gè)行內元素的第一行“縮進(jìn)”，可以用左內邊距或外邊距創(chuàng )造這種效果。

text-indent還可以設置為負值，利用這種技術(shù)，可以實(shí)現很多有意思的效果。最常見(jiàn)的用途是一種“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent:-4em;}

在為text-indent設置負值時(shí)要當心：上例中前3個(gè)詞（“This is a”）可能會(huì )超出瀏覽器窗口的左邊界。為了避免出現這種顯示問(wèn)題，建議針對負縮進(jìn)再設置一個(gè)外邊距或一些內邊距：

p {text-indent:-4em; padding-left: 4em;}

不過(guò)，負縮進(jìn)也可以得到充分利用?？紤]下面的例子，如圖6-2所示，這里增加了一個(gè)浮動(dòng)圖像：

p.hang {text-indent:-25px;}

<img src="star.gif" style="width: 60px; height: 60px;

float: left; alt="An image of a five-pointed star."/>

<p> This paragraph has a negatively indented first

line, which overlaps the floated image that precedes the text. Subsequent

lines do not overlap the image, since they are not indented in any way.</p>

使用這個(gè)簡(jiǎn)單的技術(shù)可以實(shí)現很多有意思的設計。

text-indent可以使用所有長(cháng)度單位（包括百分數值）。在下面的例子中，百分數要相對于縮進(jìn)元素父元素的寬度。換句話(huà)說(shuō)，如果將縮進(jìn)值設置為10%,所影響元素的第一行會(huì )縮進(jìn)其父元素寬度的10%。

水平對齊

與text-indent相比，text-align是一個(gè)更基本的屬性，它會(huì )影響一個(gè)元素中的文本行相互之間的對齊方式。前3個(gè)值相當直接，不過(guò)第4個(gè)和第5個(gè)則略有些復雜。

要理解這些值是如何工作的，最快的辦法就是查看圖6-5。

顯然，值left，right和center會(huì )導致元素中的文本分別左對齊、右對齊和居中。因為text-align只應用于塊級元素（如段落），所以無(wú)法將行內的一個(gè)錨居中而不影響行中的其余部分（你可能也不想這么做.因為這很可能導致文本重疊）。

西方語(yǔ)言都是從左向右讀，所以text-align的默認值是left。文本在左邊界對齊，右邊界呈鋸齒狀（稱(chēng)為“從左到右”文本）。對于希伯來(lái)語(yǔ)和阿拉伯語(yǔ)之類(lèi)的語(yǔ)言，text-align則默認為right，因為這些語(yǔ)言從右向左讀。不出所料，center會(huì )使每個(gè)文本行在元素中居中。

注意：將塊級元素或表元素居中，這要通過(guò)在這些元素上適當地設置左、右外邊距來(lái)實(shí)現.詳細內容見(jiàn)第7章。

雖然你可能認為text-align: center與<CENTER>元素的作用一樣，但實(shí)際上二者大不相同。<CENTER>不僅影響文本，還會(huì )把整個(gè)元素居中，如表。text-align不會(huì )控制元素的對齊，而只影響其內部?jì)热?。圖6-5很清楚地展示了這一點(diǎn)。實(shí)際元素沒(méi)有從一端移到另一端。只是其中的文本受影響。

警告：IE6之前的IE/Win有一個(gè)危害較大的bug:它確實(shí)會(huì )把text-align: center處理為<CENTER>元素，不僅將文本居中，還會(huì )將元素居中。在IE6和更高版本IE的標準模式中就不會(huì )這樣了，但在IE5.X和較早版本中仍是如此。

最后一個(gè)水平對齊屬性是：justify，它會(huì )帶來(lái)自己的一些問(wèn)題。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上，如圖6-6所示。然后，調整單詞和字母間的間隔，使各行的長(cháng)度恰好相等。兩端對齊文本在打印領(lǐng)域很常見(jiàn)（例如，本書(shū)就使用了兩端對齊文本），不過(guò)在CSS網(wǎng)頁(yè)設計中，還需要多做些考慮。

要由用戶(hù)代理（而不是CSS）來(lái)確定兩端對齊文本如何拉伸，以填滿(mǎn)父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會(huì )平均分布字母間的額外空間（不過(guò)CSS規范特別指出，如果letter-spacing屬性指定為一個(gè)長(cháng)度值，“用戶(hù)代理不能進(jìn)一步增加或減少字符間的空間”）。還有一些用戶(hù)代理可能會(huì )減少某些行的空間，使文本擠得更緊密。所有這些做法都會(huì )影響元素的外觀(guān)，甚至改變其高度，這取決于用戶(hù)代理的對齊選擇影響了多少文本行。

CSS也沒(méi)有指定應當如何處理連字符（注1）[1]。大多數兩端對齊文本都使用連字符將長(cháng)單詞分開(kāi)放在兩行上，從而縮小單詞之間的間隔，改善文本行的外觀(guān)。不過(guò)，由于CSS沒(méi)有定義連字符行為，用戶(hù)代理不太可能自動(dòng)加連字符。因此，在CSS中，兩端對齊文本看上去沒(méi)有打印出來(lái)好看，特別是元素可能太窄，以至于每行只能放下幾個(gè)單詞。當然，使用窄設計元素是可以的，不過(guò)要當心相應的缺點(diǎn)。